<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
  <header class="header f-jc-sb">
    <h3 class="xl m-b-20">我负责的</h3>
    <div class="right">
      <el-button type="primary" icon="plus">添加客户</el-button>
      <el-popover
        placement="bottom-start"
        title=""
        width=""
        trigger="click"
        content="">
       <template #reference><el-button class="moreAction"><i class="more"></i></el-button></template>
      </el-popover>
    </div>
  </header>
  <div class="actionPart m-b-10 f-jc-sb">
    <div class="left">
      <span class="total">共{{ 1 }}条</span>
      <el-input v-model="data.briefName" class="m-l-10" style="width: 200px;" placeholder="请输入客户简称" clearable/>
      <el-input v-model="data.label" class="m-l-10" style="width: 200px;" placeholder="客户标签" clearable/>
      <el-date-picker v-model="data.time" class="m-l-10" is-range
      range-separator="至" type="monthrange" start-placeholder="创建时间"
      end-placeholder="结束时间" clearable>
      </el-date-picker>
      <el-button plain class="m-l-10"><i class="remove"></i></el-button>
      
    </div>
    <div class="right f-ali-c">
      <el-button type="info" text>
        <span class="sm c-dark">筛选</span>
        <i class="filter m-l-3"></i>
      </el-button>
      <el-button type="info" size="small" text><i class="descending"></i></el-button>
      
    </div>
  </div>
  <div class="tablePart">
    <common-table checkable :tableColumn="data.tableColumn" :tableData="data.tableData" style="height: 480px;">
      <template #icon="{row}">
        <div class="content f-ali-c">
          <i class="avatar m-r-10"></i>
          <span>{{ row.salesperson }}</span>
        </div>
      </template>
      <template #tag="{row}">
        <el-tag type="primary" effect="plain">{{ row.status }}</el-tag>
      </template>
      <template #action>
        <el-button type="primary" size="default" link @click="">查看</el-button>
        <el-button type="primary" size="default" link @click="">填写跟进</el-button>
        <el-popover
          placement="bottom"
          title=""
          width=""
          trigger="hover"
          content="">
          <template #reference>
              <el-button type="primary" link>更多</el-button>
          </template>
        </el-popover>
        
      </template>
    </common-table>
    
  </div>
  </el-card>
  

</template>

<script lang="ts" setup>
// import { getImresponsible } from '@/http/api/customer/imResponsible';
import { IRData } from '@/modules/customer/ImResponsible';
import { onMounted, reactive } from 'vue';

const data = reactive({
  tableData: [] as IRData[],
  tableColumn: [
  {label: '客户简称', prop: 'briefName', type: 'default', width: '120px', align: 'start', template: 'text'},
  {label: '联系人：联系电话', prop: 'contactsAndTelephone', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: '业务员', prop: 'salesperson', type: 'default', width: '150px', align: 'start', template: 'icon'},
  {label: '客户状态', prop: 'status', type: 'default', width: '150px', align: 'start', template: 'tag'},
  {label: '合同数量', prop: 'contractQuantity', type: 'default', width: '120px', align: 'start', template: 'text'},
  {label: '发票数量', prop: 'invoicesNumber', type: 'default', width: '120px', align: 'start', template: 'text'},
  {label: '创建人', prop: 'creator', type: 'default', width: '100px', align: 'start', template: 'text'},
  {label: '已入账金额', prop: 'recordedAmount', type: 'default', width: '120px', align: 'start', template: 'text'},
  {label: '操作', prop: 'action', type: 'default', width: '200px', align: 'start', template: 'action', fixed: 'right'},
  ],
  briefName: '',
  label: '',
  time: []
})
const getInit = async () => {
  // const result = await getImresponsible()
  // console.log('result', result)
  // data.tableData = result.data
}
onMounted(() => {
  getInit()
})
</script>

<style lang="scss" scoped>
.header {
  .right {
    ::v-deep .moreAction {
      padding: 7px;
      border: 1px solid #9fa0a2;

      &:hover {
        background-color: transparent;
      }
    }
    .more {
      content: url('@/assets/images/more.svg');
    }
  }
}
.actionPart {
  .left {
    .remove {
      content: url('@/assets/images/remove.svg');
    }
  }
  .right {
    ::v-deep .el-button {
      margin: 0;
      padding-left: 0;
    }

    .filter {
      content: url('@/assets/images/filter.svg');
    }

    .descending {
      content: url('@/assets/images/descending.svg');
    }
  }
}
.tablePart {
  .avatar {
    content: url('@/assets/images/avatar.svg');
  }
}
</style>